﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <title>Point Based Clustering</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!-- Add a reference to the Bing Maps Control -->
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
 
     <!-- This is a reference to a class for generating test data. Not needed in production apps. -->
    <script type="text/javascript" src="scripts/TestDataGenerator.js"></script>

	<script type="text/javascript">
	    var map, myLayer, infobox;

	    function GetMap() {
	        map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: "Your_Bing_Maps_Key" });

            //Register and load the Point Based Clustering Module
	        Microsoft.Maps.registerModule("PointBasedClusteringModule", "scripts/PointBasedClustering.js");
	        Microsoft.Maps.loadModule("PointBasedClusteringModule", { callback: function () {
	            myLayer = new PointBasedClusteredEntityCollection(map, {
	                    singlePinCallback: createPin,
	                    clusteredPinCallback: createClusteredPin
	                });

	                //Add infobox layer that is above the clustered layers.
	                var infoboxLayer = new Microsoft.Maps.EntityCollection();
	                infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0,15) });
	                infoboxLayer.push(infobox);
	                map.entities.push(infoboxLayer);
	            }
	        });

            //Define custom properties for the pushpin class (this is needed for the infobox and not the clustering) 
	        Microsoft.Maps.Pushpin.prototype.title = null;
	        Microsoft.Maps.Pushpin.prototype.description = null;
	    }

	    function createPin(data, clusterInfo) {
	        var pin = new Microsoft.Maps.Pushpin(clusterInfo.center);

	        pin.title = "Single Location: " + data.Name;

	        //Add handler for the pushpin click event.
	        Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);

	        return pin;
	    }

	    function createClusteredPin(clusterInfo) {
	        var pin = new Microsoft.Maps.Pushpin(clusterInfo.center, { text: '+' });

	        pin.title = "Cluster";
	        pin.description = "Cluster Index: " + clusterInfo.index + " Cluster Size: " + clusterInfo.dataIndices.length + " Zoom in for more details.";

	        //Add handler for the pushpin click event.
	        Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);

	        return pin;
	    }

	    //Makes a request for data
	    function RequestData() {
	        var size = parseInt(document.getElementById('dataSize').value);
	        TestDataGenerator.GenerateData(size, RequestDataCallback);
	    }

	    function RequestDataCallback(response) {
	        if (response != null) {
	            myLayer.SetData(response);
	        }
	    }

	    function displayEventInfo(e) {
	        if (e.targetType == "pushpin") {
	            infobox.setLocation(e.target.getLocation());

	            infobox.setOptions({
                    title: e.target.title,
                    description: e.target.description,
                    visible:true
                });
	        }
	    }
    </script>
</head>
<body onload="GetMap();">
    <div id='myMap' style="position:relative; width:600px; height:500px;"></div>
    <br />
    Data Size: <input type="text" id="dataSize" />
    <input type="button" value="Get Mock Data" onclick="RequestData();" />
</body>
</html>
